<template>
    <div>
      <el-dialog
        title="新建1"
        @close="closeDialog()"
        :visible="isDialog2"
        :close-on-click-modal="false"
         @open="open()"
        append-to-body
      >
        <el-form :inline="true" size="medium" label-width="80px">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="24" :lg="22" style="text-align: right">
              <el-button type="primary" size="small">确定</el-button>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
              <el-form-item label="样本曲线">
                <div
                  id="newEcharts2"
                  style="width: 500px; height: 400px; padding-top: 40px"
                ></div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog()">取 消</el-button>
            <el-button type="primary" @click="closeDialog()">确 定</el-button>
      </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
export default {
  data() {
    return {};
  },
  props: {
    isDialog2: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    initEcharts() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById("newEcharts2"));
      // 绘制图表
      const option = {
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      myChart.setOption(option);
    },
    closeDialog() {
      //visible使用语法糖就不用以这种方触发告诉父组件来修改值了
      this.$emit("update:isDialog2",false)
    },
    open() {
      this.$nextTick(() => {
        //  执行echarts方法
        this.initEcharts();
      });
    }
  }
};
</script>
  
  <style>
</style>
